import React, {Component} from 'react';
import {NavBar, List, InputItem, Icon, Grid} from 'antd-mobile'
import {connect} from 'react-redux'
import {sendMsg, readMsg} from '../../redux/actions'
import api from '../../api/index'

const Item = List.Item

class Chat extends Component {
    state = {
        content: '',
        isShow: false,
        targetInfo: {}
    }


    componentWillMount() {
        let targetId = this.props.match.params.userid

        api.reqUserOne({userid: targetId}).then(({data}) => {
            this.setState({
                targetInfo: data.data
            });
        })
        const emojis = ['😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀'
            , '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣'
            , '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣'
            , '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣']
        this.emojis = emojis.map(emoji => ({text: emoji}))
    }

    componentDidMount() {
        window.scrollTo(0, document.body.offsetHeight)
    }

    componentDidUpdate() {
        window.scrollTo(0, document.body.offsetHeight)
    }

    componentWillUnmount() {
        const from = this.props.match.params.userid
        const to = this.props.user._id
        this.props.readMsg(from, to)
    }


    toggleShow = () => {
        let isShow = !this.state.isShow
        this.setState({isShow});
        if (isShow) {
            setTimeout(() => {
                window.dispatchEvent(new Event('resize'))
            }, 0)
        }
    }
    handleSend = () => {
        let from = this.props.user._id
        let to = this.props.match.params.userid
        let content = this.state.content.trim()
        if (content) {
            this.props.sendMsg({from, to, content})
        }
        this.setState({
            content: '',
            isShow: false
        });
    }

    render() {
        let {user} = this.props
        let {chatMsgs} = this.props.chat
        let meId = user._id
        let targetId = this.props.match.params.userid
        let chatId = [targetId, meId].sort().join('_')
        if(!this.state.targetInfo.header){
            return null
        }
        let msgs = chatMsgs.filter(msg => msg.chat_id === chatId)
        let targetIcon = this.state.targetInfo ? require(`../../assets/images/${this.state.targetInfo.header}.png`) : null
        return (
            <div id='chat-page'>
                <NavBar
                    className='sticky-header'
                    icon={<Icon type='left'></Icon>}
                    onLeftClick={() => this.props.history.goBack()}
                >
                    {this.state.targetInfo.username}
                </NavBar>
                <List style={{marginBottom: 50, marginTop: 50}}>
                        {
                            msgs.map(msg => {
                                if (msg.from === targetId) {
                                    return (
                                        <Item key={msg._id} thumb={targetIcon}>
                                            {msg.content}
                                        </Item>
                                    )
                                } else {
                                    return (
                                        <Item kay={msg._id} className='chat-me' extra='我'>
                                            {msg.content}
                                        </Item>
                                    )
                                }
                            })
                        }
                </List>
                <div className='am-tab-bar'>
                    <InputItem
                        placeholder='请输入'
                        value={this.state.content}
                        onChange={val => {
                            this.setState({content: val})
                        }}
                        onFocus={() => this.setState({isShow: false})}
                        extra={
                            <span>
                                <span onClick={this.toggleShow} style={{marginRight: 10}}></span>
                                <span onClick={this.handleSend}>发送</span>
                            </span>
                        }
                    ></InputItem>
                    {
                        this.state.isShow ? (
                            <Grid
                                data={this.emojis}
                                columnNum={8}
                                carouselMaxRow={4}
                                isCarousel={true}
                                onClick={item => {
                                    this.setState({content: this.state.content + item.text})
                                }}
                            ></Grid>
                        ) : null
                    }
                </div>
            </div>
        );
    }
}

export default connect(
    state => ({user: state.user, chat: state.chat}),
    {sendMsg, readMsg}
)(Chat);